import React, {Component} from 'react';
import {Route, Link} from "react-router-dom"

import Detail from "./Detail";

class Message extends Component {
  state = {
    messageList: [
      {
        id: "1",
        title: "消息1",
        content: "消息队里偶尔"
      },
      {
        id: "2",
        title: "消息2",
        content: "水电费"
      },
      {
        id: "3",
        title: "消息3",
        content: "山东分公司的"
      }
    ]
  }

  replaceShow(id, title, content) {
    // replace跳转 + 携带params参数1
    // this.props.history.replace(`/home/message/detail/${id}/${title}/${content}`)

    // replace跳转 + 携带search参数
    // this.props.history.replace(`/home/message/detail?id=${id}&title=${title}&content=${content}`)

    // replace跳转 + 携带state参数
    this.props.history.replace(`/home/message/detail`, {id,title,content})
  }

  pushShow(id, title, content) {
    // 使用history的push方法跳转页面
    // this.props.history.push(`/home/message/detail/${id}/${title}/${content}`)
    // push + search传参
    // this.props.history.push(`/home/message/detail?id=${id}&title=${title}&content=${content}`)
    // push 跳转 + state携带参数
    this.props.history.push(`/home/message/detail`, {id,title,content})
  }

  goBack =  () => {
    this.props.history.goBack();
  }

  nextPage =  () => {
    this.props.history.goForward()
  }

  render() {
    const {messageList} = this.state;
    return (
      <div>
        <ul>
          {
            messageList.map(item => {
              return (
                <li key={item.id}>
                  {/* 向组件发送state参数,和组件的state无任何关系,是路由独有的参数 */}
                  {/* <Link  to={ { pathname:"/home/message/detail", state:{ ...item } } }>{item.title}</Link> */}
                  {/*<Link to={`/home/message/detail?id=${item.id}&title=${item.title}&content=${item.content}`}>{item.title}</Link>*/}
                  <Link to={{pathname: "/home/message/detail", state: {...item}}}/>
                  &nbsp;
                  <button onClick={() => this.pushShow(item.id, item.title, item.content)}>push查看</button>
                  &nbsp;
                  <button onClick={() => this.replaceShow(item.id, item.title, item.content)}>replace查看</button>
                </li>
              )
            })
          }
        </ul>
        <hr/>
        <button onClick={ this.goBack }>回退</button>
        <button onClick={ this.nextPage }>前进</button>

        {/* 注册路由  */}
        {/* state参数无需申明,正常接受就行 */}
        {/*<Route path="/home/message/detail/:id/:title/:content" component={Detail}/>*/}
        {/*<Route path="/home/message/detail" component={Detail}/>*/}
        <Route path="/home/message/detail" component={Detail}/>
      </div>
    );
  }
}

export default Message;